<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>教育缴费</title>
    <link rel="stylesheet" href="./static/css/web.css"/>
    <link rel="stylesheet" href="./static/css/payment.css">
    <link rel="stylesheet" href="./static/bootstrap/css/bootstrap.css">
</head>
<body style="background: #e7e8eb;">
<div id="app" v-cloak>
    <div class="mainHeaderBox">
        <div class="mainHeaderBoxContent">
            <div class="mainHeaderBoxContentLog" @click="toPage('../main.html')">
                <!--<img src="../img/logo.png">
                <span>仁众智慧餐饮云平台</span>-->
                <img src="https://www.yqsh.cn/img/logo.png" id="show_logo">
                <span id="show_name">微信体验学校</span>
            </div>
            <div class="mainHeaderBoxContentMenus">
                <!--
                    作者：303740339@qq.com
                    时间：2019-02-13
                    描述：<div class="mainHeaderBoxContentMenu mainHeaderBoxContentMenuActive">
                -->
                <a class="mainHeaderBoxContentMenu" href="../contacts.html">
                    通讯录
                </a>
                <a class="mainHeaderBoxContentMenu mainHeaderBoxContentMenuActive" href="../workbench.html">
                    工作台
                </a>
                <a class="mainHeaderBoxContentMenu" href="../incrementService.html">
                    增值服务
                </a>
                <a class="mainHeaderBoxContentMenu" href="../html/dataCenter/index.html">
                    消费数据
                </a>
                <a class="mainHeaderBoxContentMenu" href="../consum.html">
                    数据总览
                </a>
                <a class="mainHeaderBoxContentMenu" href="../setting.html">
                    设置
                </a>
            </div>
            <div class="exit" onclick="logout()">
                退出
            </div>
        </div>
    </div>
    <div class="mainContentBox w1200 auto-height">
        <div class="contact-home-box">
            <div class="left-panel">
                <ul class="main-menu-nav" style="margin: 20px 0;">
                    <li class="menu-two" :class="{'hover':item.url && window.location.href.indexOf(item.url)>=0}"
                        v-for="item in menus">
                        <a :href="item.url"><span>{{item.title}}</span></a>
                    </li>
                </ul>
            </div>
            <div class="right-panel">
                <div style="margin: 20px;min-height:550px;">
                    <div class="header-title dline">
                        <h3>缴费项目信息</h3>
                        <p>对需要进行审核的补助进行审核</p>
                    </div>
                    <div style="margin:30px 0;">
                        <form>
                            <div class="form-group">
                                <label>项目名称：</label>
                                <input type="text" placeholder="请输入项目名称" v-model="info.itemName" class="form-control"
                                       style="width:400px;">
                            </div>
                            <div class="form-group">
                                <label>项目类型：</label>
                                <select v-model="info.itemType" class="form-control" style="width:400px;">
                                    <option>请选择</option>
                                    <option value="学杂费">学杂费</option>
                                    <option value="学费">学费</option>
                                    <option value="其它费用">其它费用</option>
                                </select>
                            </div>
                            <!--
                            <div class="form-group">
                                <label>是否必交：</label>
                                <input type="checkbox"/>
                                <label class="form-check-label">是</label>
                                <small class="form-text text-muted">We'll never share your email with
                                    anyone else.</small>
                            </div>
                            -->
                            <div class="form-group">
                                <label>金额：</label>
                                <input type="number" v-model="info.amount" placeholder="请输入金额" class="form-control"
                                       style="width:100px;">
                            </div>
                            <div class="form-group">
                                <label>缴费开始时间：</label>
                                <input id="time1" v-model="info.startTime" autocomplete="off" type="text" placeholder="请选择缴费开始时间"
                                       class="form-control" style="width:200px;">
                                <small class="form-text text-muted">在缴费开始时间前用户无法进行缴费操作.</small>
                            </div>
                            <div class="form-group">
                                <label>缴费结束时间：</label>
                                <input id="time2" v-model="info.endTime" autocomplete="off" type="text" placeholder="请选择缴费结束时间"
                                       class="form-control" style="width:200px;">
                                <small class="form-text text-muted">超过了缴费结束时间后用户将无法进行缴费.</small>
                            </div>
                            <div class="form-group">
                                <label>是否启用：</label>
                                <input v-model="info.isEnabled" true-value="1" false-value="0" type="checkbox"/>
                                <label class="form-check-label">是</label>
                                <small class="form-text text-muted">选中将允许用户进行缴费操作，否则用户将不能进行缴费操作.对之前已缴费的缴费记录不影响</small>
                            </div>
                            <div class="form-group">
                                <label>收款商户：</label>
                                <select v-model="info.merchantId" class="form-control" style="width:400px;">
                                    <option>请选择</option>
                                    <option v-for="item in merchantList" :value="item.id">{{item.merchantName}}</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label>通知接口地址：</label>
                                <input type="text" v-model="info.notifyUrl" class="form-control" placeholder="请输入通知接口地址"
                                       style="width:600px;">
                            </div>
                            <div class="form-group">
                                <label>通知接口参数：</label>
                                <input type="text" v-model="info.notifyParam" class="form-control"
                                       placeholder="请输入通知接口参数" style="width:600px;">
                            </div>
                            <div style="margin:30px 0;">
                                <button type="button" class="btn btn-primary" @click="saveData">提交</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="footerBox">
        <div class="footerBoxContent">
            Copyright Notice：@2020 YQSH. All Rights Reserved | ICP：蜀ICP备19024447号-1
        </div>
    </div>
</div>
</body>

</html>
<script type="text/javascript" src="./static/js/vue.min.js"></script>
<script type="text/javascript" src="./static/js/utils.js"></script>
<script type="text/javascript" src="./static/js/jquery.js"></script>
<script type="text/javascript" src="./static/js/layer/layer.js"></script>
<script src="./static/js/laydate/laydate.js"></script>
<link rel="stylesheet" href="./static/js/laydate/theme/default/laydate.css">
<script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.26.0/moment.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/qs/6.9.4/qs.min.js"></script>
<script type="text/javascript">
    let vm = new Vue({
        el: '#app',
        data: {info: {}, merchantList: []},
        methods: {
            loadMerchantList: function () {
                let _this = this;

                post("/common/merchantList", function (result) {
                    _this.merchantList = result.data;
                })
            },
            saveData: function () {
                let _this = this;

                postWithData("/payitem/save", _this.info, function (result) {
                    showMessage("保存完成.");

                    setTimeout(function () {
                        history.back();
                    },1000)
                })
            },
            loadData: function (id) {
                let _this = this;

                if (id) {
                    post("/payitem/get/" + id, function (result) {

                        if (result && result.data && result.data.startTime) {
                            result.data.startTime = moment(result.data.startTime).format('YYYY-MM-DD');
                        }

                        if (result && result.data && result.data.endTime) {
                            result.data.endTime = moment(result.data.endTime).format('YYYY-MM-DD');
                        }

                        _this.info = result.data;
                    })
                }
            }
        },
        mounted: function () {
            this.loadData(getQueryParam("id"));
            this.loadMerchantList();
        }
    });

    //时间选择器
    laydate.render({
        elem: '#time1',
        done: function (value, date) { //监听日期被切换
            vm.info.startTime = value;
        }
    });

    //时间选择器
    laydate.render({
        elem: '#time2',
        done: function (value, date) { //监听日期被切换
            vm.info.endTime = value;
        }
    });
</script>